<template>
	<view class="x-main-content">
		<u-navbar bgColor="#fff" :fixed="true" leftIconColor="#000" leftIconSize="42rpx" autoBack placeholder
			title="实名认证">
		</u-navbar>
		<view class="container">
			<view style="background-color: #fff;margin-bottom: 20rpx;padding: 20rpx;border-radius: 20rpx;">
				<view style="font-size: 28rpx;color: #000;margin-bottom:20rpx ">请上传身份证的正反面</view>
				<view style="margin-bottom: 30rpx;font-size: 24rpx;color: #ababab;">请确保证件边框完整、字体清晰、亮度均匀，以便核验</view>
				<view class="" style="display: flex;justify-content: space-around;">
					<img :src="idCardPos" alt="" style="width: 202rpx;height: 140rpx;" @click="chooseImg('pos')" />
					<img :src="idCardNeg" alt="" style="width: 202rpx;height: 140rpx;" @click="chooseImg('neg')" />
				</view>
			</view>
			<view style="background-color: #fff;padding: 20rpx;border-radius: 20rpx;">
				<view style="font-size: 28rpx;color: #000;padding: 20rpx 0;">身份信息</view>
				<view
					style="font-size: 26rpx;color: #555;display: flex;justify-content: space-between;padding: 20rpx 0;">
					<span>姓名</span>
					<input type="text" class="level-input" placeholder="请输入真实姓名"
						placeholder-style="font-size:24rpx;color:#ababab" v-model="realName" maxlength="15"
						style="color:#ababab" />
				</view>
				<view
					style="font-size: 26rpx;color: #555;display: flex;justify-content: space-between;padding: 20rpx 0;">
					<span>身份证号</span>
					<input type="text" class="level-input" placeholder="请输入身份证号"
						placeholder-style="font-size:24rpx;color:#ababab" v-model="realCard" maxlength="18"
						style="color:#ababab" />
				</view>
				<view
					style="font-size: 26rpx;color: #555;display: flex;justify-content: space-between;padding: 20rpx 0;">
					<span>身份证有效期</span>
					<view>
						<span @click="showPick('start')" style="font-size:24rpx;color:#ababab">{{cardStart}}</span>
						<span style="margin: 0 1px;color:#ababab">-</span>
						<span @click="showPick('end')" style="font-size:24rpx;color:#ababab">{{cardEnd}}</span>
					</view>
				</view>
			</view>
		</view>
		<u-datetime-picker ref="datetimePicker" :show="dateShow" mode="date" @cancel="dateCancel" @confirm="dateConfirm"
			:minDate="minDate" :maxDate="maxDate">
		</u-datetime-picker>
		<view class="toConfirm">
			<view class="btn-confirm" @click="toConfirm">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	import {
		includes
	} from 'lodash'
	export default {
		data() {
			return {
				content: '',
				idCardPos: require('../../static/images/idCard2.png'),
				idCardNeg: require('../../static/images/idCard1.png'),
				realName: '',
				realCard: '',
				dateShow: false,
				cardStart: '开始时间',
				cardEnd: '结束时间',
				flag: '',
				minDate: '',
				maxDate: '',
				posRes: '',
				negRes: ''

			}
		},
		onLoad() {

		},
		created() {

		},
		methods: {
			chooseImg(code) {
				uni.chooseImage({
					count: 1,
					success: res => {
						const tempFilePaths = res.tempFilePaths[0]
						console.log(tempFilePaths)
						if (code == 'pos') {
							this.idCardPos = tempFilePaths
						} else if (code == 'neg') {
							this.idCardNeg = tempFilePaths
						}
					}
				})
			},
			toConfirm() {
				if (!this.idCardPos || !this.idCardNeg || !this.realCard || !this.realName || this.cardStart == '开始时间' || this.cardEnd == '结束时间') {
					uni.showModal({
						title: '提示',
						content: '请将身份信息填写完整！'
					})
				} else {
					uni.showLoading({
						title: '提交中，请稍等…',
						mask: true
					})
					uni.uploadFile({
						url: "https://pyw.peiyiyiliao.com/prod-api/api/common/uploadFile",
						filePath: this.idCardPos,
						name: 'file',
						success: res => {
							console.log(res)
							this.posRes = JSON.parse(res.data).data.url
							uni.uploadFile({
								url: "https://pyw.peiyiyiliao.com/prod-api/api/common/uploadFile",
								filePath: this.idCardNeg,
								name: 'file',
								success: async res => {
									this.regRes = JSON.parse(res.data).data.url
									console.log(res)
									if (this.posRes && this.regRes) {
										console.log('123')
										const data = {
											cityCode: uni.getStorageSync('myAddress').cityId || '',
											realName: this.realName,
											idCardNumber: this.realCard,
											idCardFront: this.posRes,
											idCardBack: this.regRes,
											idCardValidDate: this.cardStart.replace(
													/-/g, ".") + '-' + this.cardEnd
													.replace(
															/-/g, ".")
										}
										let res = await this.$request('/api/user/submitIdCardInfo', data, 'POST','type')
										console.log(res)
										if(res.data.code !== 200){
											this.$u.toast(res.data.msg)
											return
										}
										this.$nextTick(() => {
											uni.navigateBack({
												delta: 1
											});
										})
									}
								}
							})
						}
					})


					setTimeout(() => {
						uni.hideLoading()
					}, 2000)

					// console.log(this.cardStart.replace(/-/g, ".") + '-' + this.cardEnd.replace(/-/g, "."))
				}
			},
			showPick(code) {
				this.flag = code
				if (this.flag == 'start') {
					this.dateShow = true
					this.minDate = new Date('1950-01-01').getTime()
					this.maxDate = Number(new Date())
				} else {
					if (this.cardStart == '开始时间') {
						uni.showModal({
							'title': '提示',
							'content': '请先选择开始时间！'
						})
					} else {
						this.dateShow = true
						this.minDate = new Date(this.cardStart).getTime() + 24 * 60 * 60 * 1000
						this.maxDate = new Date('2099-12-31').getTime()
					}
				}
			},
			dateCancel() {
				this.dateShow = false
			},
			dateConfirm(e) {
				let res = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')

				if (e.value) {
					this.dateShow = false
					if (this.flag == 'start') {
						this.cardStart = res
					} else {
						this.cardEnd = res
					}
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 20rpx 40rpx;
	}

	.level-input {
		text-align: right;
	}

	.toConfirm {
		position: fixed;
		width: 100%;
		bottom: 60rpx;
		left: 0;
		display: flex;
		justify-content: center;

		.btn-confirm {
			padding: 12rpx 0;
			background-color: #386fff;
			font-size: 28rpx;
			color: #fff;
			border-radius: 30rpx;
			letter-spacing: 1px;
			width: 600rpx;
			text-align: center;
		}
	}
</style>